<template>
    <view class="content">
        <view class="title mt64">HELLO！</view>
        <view class="sub_title">欢迎使用—搬搬货小程序</view>
        <view class="copyright">© 2024-2040 上海新太语商务咨询中心版权所有</view>
        <view class="role mt96" :class="{ active: role == 'customer' }" @click="role = 'customer'">
            <view class="role_content flex_r kh">
                <view class="_role">我是客户</view>
                <view class="_select">
                    <image v-if="(role == 'customer')" src="@/static/images/index/icon_select.png"
                        style="width: 32rpx;height: 32rpx;" />
                    <image v-else src="@/static/images/index/icon_unselect.png" style="width: 32rpx;height: 32rpx;" />
                </view>
            </view>
        </view>
        <view class="role mt64" :class="{ active: role == 'worker' }" @click="role = 'worker'">
            <view class="role_content flex_r sf">
                <view class="_role">我是师傅</view>
                <view class="_select">
                    <image v-if="(role == 'worker')" src="@/static/images/index/icon_select.png"
                        style="width: 32rpx;height: 32rpx;" />
                    <image v-else src="@/static/images/index/icon_unselect.png" style="width: 32rpx;height: 32rpx;" />
                </view>
            </view>
        </view>
        <button class="btn flex_c" @click="handlerAuth">提交</button>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { createInviter } from '@/api/index/index'
import { useMemberStore } from '@/stores';
import { onLoad } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
const { isLogin, memberInfo } = storeToRefs(useMemberStore())

const role = ref("customer")
const qrQuery = ref("")

onLoad((query:any) => {
    // 获取二维码的分享参数(如果已经登录 直接绑定分享关系,如果没有登录,就保存分享参数,登录后绑定分享参数)
    if(query.scene){
        const scene = decodeURIComponent(query.scene)
        qrQuery.value = scene
    }
    uni.showLoading({
        title: '获取登录信息...'
    })
    setTimeout(() => {
        uni.hideLoading()
        if (isLogin.value) {
            // addShaer()
            uni.switchTab({
                url: '/pages/tabbar/home/home'
            })
        }else{
            uni.setStorageSync("qrQuery", qrQuery.value)
        }
    }, 500)

})

const addShaer = () => {
    const par = {
            inviterId:qrQuery.value.split("&")[0],
            invitedId:memberInfo.value.id,
            invitationCode:""
        }
        createInviter(par).then((res:any) => {
            console.log(res,"fenxiang");
        })
}

const handlerAuth = () => {
    uni.setStorageSync("role", role.value)
    uni.switchTab({
        url: '/pages/tabbar/home/home'
    })
}
</script>

<style scoped lang="scss">
.content {
    width: 100%;
    height: 100vh;
    padding: 0 24rpx;
    box-sizing: border-box;
    background: linear-gradient(151deg, #FFE9BE 0%, #FFFFFF 100%);
    overflow: hidden;
}

.title {
    font-weight: 600;
    font-size: 64rpx;
    color: #F2920B;
    line-height: 75rpx;
    margin-left: 24rpx;
}

.sub_title {
    width: fit-content;
    padding: 8rpx 16rpx;
    margin-left: 24rpx;
    background: #F2920B;
    border-radius: 80rpx 80rpx 80rpx 80rpx;
    font-size: 28rpx;
    color: #FFFFFF;
    margin-top: 16rpx;
}

.copyright {
    margin-left: 24rpx;
    font-size: 20rpx;
    color: #F2920B;
    margin-top: 16rpx;
}

.role {
    width: 654rpx;
    height: 192rpx;
    border-radius: 8rpx;
    box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;

    .role_content {
        width: 654rpx;
        height: 192rpx;

        ._role {
            margin-right: 24rpx;
            font-weight: 600;
            font-size: 32rpx;
            color: #222222;
            line-height: 38rpx
        }

        ._select {
            margin-right: 40rpx;
        }
    }
}

.kh {
    background-image: url("https://www.banbanhuo.com/minio//banbanhuo/c1c8535024f7ba8e297616e14c622aaa4c60e90adec73416c5df5c3a3f9e0612.png");
    background-repeat: no-repeat;
    background-size: 654rpx 192rpx;
}

.sf {
    background-image: url("https://www.banbanhuo.com/minio//banbanhuo/cb8d1b56a76bfc84b2b0f82d42fe8f9712b76c9fa1e373fa9374a44869621350.png");
    background-repeat: no-repeat;
    background-size: 654rpx 192rpx;
}

.active {
    border: 1rpx solid #FF5F00;
}

.btn {
    width: 702rpx;
    height: 80rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #FFFFFF;
    background: #FE6E04;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    position: fixed;
    bottom: 82px;
}

.mt64 {
    margin-top: 64rpx;
}

.mt96 {
    margin-top: 96rpx;
}
</style>